import React from "react";
import PixelGrid from "./pixel-grid";
import { defaultRowsAndCols, defaultPixelGrid } from "@/lib/constant";
import ImageUploaderAndRecognize from "./image-uploader-and-recognize";

const LogoEditor = ({ value, onChange }) => {
  const innerValue =
    value && Array.isArray(value) && value.length === 32
      ? value
      : defaultPixelGrid;
  return (
    <div className="p-2 w-full">
      <ImageUploaderAndRecognize setPixelGrid={innerValue} />
      <PixelGrid
        pixelGrid={innerValue}
        rows={defaultRowsAndCols.rows}
        cols={defaultRowsAndCols.cols}
        handlePixelClick={(row, col) => {
          const originRow = innerValue[row];
          originRow[col] = originRow[col] === 1 ? 0 : 1;

          innerValue[row] = originRow;
          onChange([...innerValue]);
        }}
      />
    </div>
  );
};

export default LogoEditor;
